<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Blurred Background Popup</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css"
    integrity="sha512-Fo3rlrZj/k7ujTnHg4CGR2D7kSs0v4LLanw2qksYuRlEzO+tcaEPQogQ0KaoGN26/zrn20ImR1DfuLWnOo7aBA=="
    crossorigin="anonymous" referrerpolicy="no-referrer" />
</head>
<style>
	body {
	  margin: 0;
	}
	
	.container {
	  display: flex;
	  flex-direction: column;
	  align-items: center;
	  height: 100vh;
	  justify-content: center;
	  background: url("https://images.unsplash.com/photo-1560762484-813fc97650a0?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1074&q=80");
	  background-size: cover;
	  text-align: center;
	  transition: filter 0.7s;
	}
	
	h1 {
	  font-size: 60px;
	  color: white;
	  font-family: Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif;
	  letter-spacing: 4px;
	  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
	}
	
	.btn {
	  padding: 10px 20px;
	  width: 200px;
	  cursor: pointer;
	  background-color: orangered;
	  border: none;
	  border-radius: 5px;
	  font-size: 20px;
	}
	
	.btn:hover {
	  filter: brightness(0.8);
	}
	
	.active.container {
	  filter: blur(5px) brightness(0.7);
	}
	
	.popup-container {
	  position: fixed;
	  left: 50%;
	  transform: translateX(-50%);
	  background-color: white;
	  width: 400px;
	  height: 200px;
	  top: 30%;
	  display: flex;
	  flex-direction: column;
	  padding: 20px;
	  background: url("https://images.unsplash.com/uploads/141103282695035fa1380/95cdfeef?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1730&q=80");
	  background-size: cover;
	  border-radius: 10px;
	  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
	  opacity: 1;
	  transition: all 0.7s;
	}
	
	h4 {
	  font-size: 30px;
	  margin: 10px 0;
	  font-family: sans-serif;
	  color: blueviolet;
	}
	
	label {
	  color: blueviolet;
	  font-family: sans-serif;
	}
	
	.popup-btn {
	  background-color: orangered;
	  padding: 10px;
	  font-size: 20px;
	  cursor: pointer;
	  border: 2px solid;
	}
	
	.input {
	  border: 2px solid;
	  padding: 10px;
	  margin: 10px 0;
	  font-size: 20px;
	  text-align: center;
	}
	
	.input::placeholder {
	  color: lightgray;
	}
	
	.close-icon {
	  position: absolute;
	  right: 20px;
	  cursor: pointer;
	}
	
	.close-icon:hover {
	  color: orangered;
	}
	
	.active.popup-container {
	  visibility: hidden;
	  opacity: 0;
	  top: 10%;
	}
</style>
<body>
  <div class="container">
    <h1>Welcome to our website</h1>
    <button class="btn">Click to join</button>
  </div>
  <div class="popup-container active">
    <h4>20% OFF Offer</h4>
    <label for="email">Your Email</label>
    <input type="email" name="email" class="input" placeholder="Enter Your Email" />
    <button class="popup-btn">Join</button>
    <div class="close-icon">
      <i class="fas fa-times fa-2x"></i>
    </div>
  </div>
</body>
<script>
	const containerEl = document.querySelector(".container");
	
	const btnEl = document.querySelector(".btn");
	
	const popupContainerEl = document.querySelector(".popup-container");
	
	const closeIconEl = document.querySelector(".close-icon");
	
	btnEl.addEventListener("click", () => {
	  containerEl.classList.add("active");
	  popupContainerEl.classList.remove("active");
	});
	
	closeIconEl.addEventListener("click", () => {
	  containerEl.classList.remove("active");
	  popupContainerEl.classList.add("active");
	});
</script>
</html>